<template>
	<comRoot>
		<template #page>
			<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/page-bg.png`" class="bg" />
			
			<!-- <comNavHeight></comNavHeight> -->
			<comDetailNavigateBack title="商城" />
			
			<view class="shop-content-list relative">
				<scroll-view scroll-y :style="{ height: 'calc(100vh - ' + commonNavHeight + ' - 90rpx - 26rpx)' }">
					<view class="swiper">
						<swiper class="banner mx-auto" @change="swiperChange" :autoplay="true" :interval="3000" :duration="500"
							:circular="true">
							<swiper-item v-for="(item, index) in bannerImgList" @click="gooGoodsPage(item, index)" :key="index">
								<image class="banner-img absolute" v-if="commonConfigs && commonConfigs.domainFrontFileLink"
									:style="{
										'z-index': 10,
										'opacity': currentSwiperImgIndex === index ? 1 : 0.1,
										'transition': 'all 4.8s',
									}" :src="item.bg_image || `${commonConfigs.domainFrontFileLink}/files/images/home/swiper-bg.png`"
									mode="aspectFill" />
								<image class="banner-img absolute" style="z-index: 20" :src="item.image" mode="aspectFill" />
							</swiper-item>
						</swiper>
					</view>
					
					<view class="tabbar-box flex flex-justify-content-center" >
						<view class="tabbar-box-item flex relative" 
						v-for="(item, index) in shopTabList" 
						v-if="commonOnline ? (index > 0 ? false : true) : true"
						:key="index" 
						@click="tabTypeClick(item.id)">
							<image class="bg" :src="shopTabIndex === item.id ? `${commonConfigs.domainFrontFileLink}/files/images/common/shop-tab-active.png` : `${commonConfigs.domainFrontFileLink}/files/images/common/shop-tab.png`" mode=""> </image>
							<text :class="['relative font-hanserif-bold text flex-all-center', shopTabIndex === item.id ? 'active' : '']">{{ item.product_type_name }}</text>
						</view>
					</view>
					
					<view class="flex relative flex-wrap flex-justify-content-between shop-box-list">
						<view v-if="!commonOnline" class="shop-tip flex flex-align-items-center absolute">
							<image src="/static/images/public_imgs/important-note.png" class="shop-tip-icon" mode=""></image>
							<text>所有商品只可发货，商城商品均为流通品非评级卡!</text>
						</view>
						
						<view style="width: 100%;" v-for="(item, index) in productList" :key="index">
							<comSecShopCard :item="item" @gooDetailPage="gooDetailPage"></comSecShopCard>
						</view>
						
						<comLoadMore class="load-more-txt flex-all-center" :loading="false" :showLoadendTxt="showLoadendTxt"></comLoadMore>
					</view>
				</scroll-view>
				
				<!-- 侧边栏按钮 -->
				<view class="home-sider-btns">
					<!-- 联系客服 -->
					<image class="sider-icon-kefu" v-if="commonConfigs && commonConfigs.domainFrontFileLink"
						:src="`${commonConfigs.domainFrontFileLink}/files/images/home/concact-kefu-icon.png`" mode=""
						@click="showGroupFun"></image>
				</view>
			</view>
		</template>
	</comRoot>
</template>

<script>
	import store from '@/store';
	import { getProductTypeListApi, getProductListApi, getHomeBannerApi, } from '@/setupproject/INTERFACE';
	import {
		setJumpFunTo
	} from '@/setupproject/TOOLS_FUN.js';
	
	export default {
		name: 'shopPage',
		data() {
			return {
				shopTabIndex: '',
				shopTabList: [],
				productList: [],
				
				bannerImgList: [], //轮播图
				currentSwiperImgIndex: 0, // 当前轮播图下标
			};
		},
		watch: {
			shopTabIndex() {
				this.getProductListApi(this.shopTabIndex);
			}
		},
		computed: {
			commonNavHeight() {
				return store.getters.commonNavHeight + 'px';
			},
			commonConfigs() {
				return store.getters.commonConfigs || {};
			},
			commonOnline() {
				return this.$store.getters.commonOnline;
			},
			showLoadendTxt() {
				return this.productList.length ? true : false;
			},
		},
		onLoad() {
			this.loadDataGetFun();
		},
		methods: {
			// 轮播图跳转
			gooGoodsPage(item, index) {
				return setJumpFunTo(item, index);
			},
			
			// 福利群
			showGroupFun() {
				this.$store.commit('SHOW_GROUP_SET_FUN', true);
			},
			
			// 轮播图切换时间
			swiperChange(item) {
				this.currentSwiperImgIndex = item.detail.current;
			},
			
			// 获取轮播图
			async getHomeBannerApi() {
				const {
					data
				} = await getHomeBannerApi({
					pack_name: this.commonConfigs.appPackageName,
					version: this.commonConfigs.appPackageVer,
					platform: uni.getSystemInfoSync().platform,
					scene: 1
				});
				this.bannerImgList = data.banner;
			},
			
			// 父组件tabbar触发当前子组件事件
			async loadDataGetFun(e) {
				await this.getHomeBannerApi();
				this.getProductTypeListApi();
			},
			async getProductTypeListApi() {
				const { data, code } = await getProductTypeListApi();

				if (code !== 200) {
					return;
				}
				
				this.shopTabList = data.product_type_list;
				this.shopTabIndex = data.product_type_list[0].id;
			},
			tabTypeClick(id) {
				this.shopTabIndex = id;
			},
			async getProductListApi(id) {
				const { data, code, msg } = await getProductListApi({
					product_type_id: id
				});
				if (code !== 200) {
					return uni.showToast({
						title: msg,
						icon: 'none'
					});
				}
				this.productList = data.product_list;
			},
			gooDetailPage(id) {
				uni.navigateTo({
					url: `/secondary/shopInfoPage/shopInfoPage?id=${id}`
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.shop-content-list {
		padding: 0 20rpx;
		.tabbar-box {
			overflow-x: auto;
			margin-bottom: 30rpx;
			height: 80rpx;
			.tabbar-box-item {
				margin-right: 20rpx;
				color: #E1E4E7;
				height: 56rpx;
				& > .active {
					color: #FFF;
				}
				.text {
					font-weight: bold;
					width: 175rpx;
					height: 56rpx;
					font-size: 28rpx;
				}
			}
		}
		
		// 去除tabbar滚动条
		.tabbar-box::-webkit-scrollbar {
			display: none;
		}
		
		// 侧边栏按钮
		.home-sider-btns {
			position: fixed;
			bottom: 360rpx;
			right: 0rpx;
			z-index: 1001;
			
			.sider-icon-gift {
				width: 180rpx;
				height: 218rpx;
			}
			
			.sider-icon-kefu {
				width: 163rpx;
				height: 177rpx;
			}
		
			.sider-icon-top {
				width: 115rpx;
				height: 114rpx;
				margin-left: 26rpx;
			}
		}
		
		.swiper {
			margin: 0 auto;
			width: 750rpx;
			height: 375rpx;
		
			.banner {
				width: 100%;
				height: 100%;
			}
		
			.banner-img {
				width: 100%;
				height: 100%;
			}
		}
		
		
		.shop-tip{
			font-size: 20rpx;
			font-weight: bold;
			color: #666666;
			top: 70rpx;
			left: 20rpx;
			.shop-tip-icon{
				width: 20rpx;
				height: 20rpx;
				margin-right: 10rpx;
			}
		}

		.shop-box-list {
			padding-bottom: 300rpx;
		}
		
		.load-more-txt {
			width: 100%;
			color: #FFF;
		}
	}
</style>
